body{
    margin: 0;
    background-color: #000;
}
.box,
.grid,
.grid .item,
.grid .row{
    display: flex;
}
.grid,
.grid .item,
.grid .row,
.grid .content{
    flex: 1;
}
.box{
    margin: 200px auto 0;
    width: 400px;
    height: 400px;
    border: 1px solid #fff;
}
.grid{
    margin: -10px -10px 0 0;
    flex-direction: column;
}
.grid .item,
.grid .row{
    transition: all 0.4s linear;
}
.grid .item{
    margin-right: 10px;
    flex: 1;
    min-width: calc(25% - 10px);
}
.grid .row{
    margin-top: 10px;
    min-height: calc(25% - 10px);
}
.grid .row:hover{
    min-height: calc(50% - 10px);
}
.grid:has(.item:nth-of-type(1):hover) .item:nth-of-type(1){
    min-width: calc(50% - 10px);
}
.grid:has(.item:nth-of-type(2):hover) .item:nth-of-type(2){
    min-width: calc(50% - 10px);
}
.grid:has(.item:nth-of-type(3):hover) .item:nth-of-type(3){
    min-width: calc(50% - 10px);
}